import { ref, reactive, ToRef, watch } from 'vue';
import { pagination } from './interface';
const data: any = reactive({
    tableData: [],
    total: 0,
    dialogDatas: {},
    dialogConfig: {}
});
let pagination: pagination = reactive({
    pageNum: 1,
    pageSize: 3
});
const fromList: Array<object> = [
    {
        type: 'input',
        model: 'name',
        title: '姓名',
        placeholder: '请输入姓名'
    },
    // {
    //     type:'date',
    //     model:'date',
    //     title:'时间',
    //     dateType:'date',
    //     valueFormat:'YYYY-MM-DD',
    //     placeholder:'请输入时间'
    // },
    // {
    //     type:'selete',
    //     model:'type',
    //     title:'类型',
    //     placeholder:'请选择类型',
    //     seleteValue:{
    //         modelLabel:'label',
    //         modelValue:'value',
    //         key:'id'
    //     },
    //     options:[
    //         {
    //             id:1,
    //             label:'类型1',
    //             value:'typeOne',

    //         },
    //         {
    //             id:2,
    //             label:'类型2',
    //             value:'typeTwo'
    //         }
    //     ]
    // },
    {
        type: 'button',
        options: [
            {
                btnName: '搜索',
                type: 'primary'
            },
            {
                btnName: '新增',
                type: 'primary'
            }
        ]
    }
    // {
    //     type: 'button',
    //     options: [
    //         {
    //             btnName: '新增',
    //             type: 'primary'
    //         }
    //     ]
    // }
];
let loading: ToRef<boolean> = ref(true);
const columns = [
    {
        prop: 'name',
        label: '姓名'
    },
    {
        prop: 'address',
        label: '地址'
    },
    {
        prop: 'age',
        label: '年龄'
    },
    {
        prop: 'phone',
        label: '电话'
    },
    {
        prop: 'type',
        label: '类型'
    },
    // {
    //     prop: 'imgUrl',
    //     label: '图片',
    //     type: 'img',
    //     options: {}
    // },
    {
        label: '操作',
        type: 'button',
        width: 240,
        options: [
            {
                btnName: '编辑'
            },
            {
                type: 'danger',
                btnName: '删除'
            }
        ]
    }
];
const dialogOptions: object = {
    type: 'form',
    rulesTrue: false,
    formOptions: [
        {
            type: 'upload',
            label: '头像',
            prop: 'imgUrl',
            config: {
                action: 'http://139.155.93.250:3000/upload',
                type: ['jpeg', 'png'],
                size: 2
            }
        },
        {
            type: 'input',
            label: '姓名',
            prop: 'name',
            placeholder: '请输入姓名',
            inputType: '',
            style: 'width:300px'
        },
        {
            type: 'input',
            label: '电话',
            prop: 'phone',
            placeholder: '请输入电话',
            inputType: '',
            style: 'width:300px'
        },
        {
            type: 'input',
            label: '地址',
            prop: 'address',
            placeholder: '请输入地址',
            inputType: '',
            style: 'width:300px'
        },
        {
            type: 'input',
            label: '年龄',
            prop: 'age',
            placeholder: '请输入年龄',
            inputType: '',
            style: 'width:300px'
        },
        {
            type: 'selete',
            label: '类型',
            prop: 'type',
            placeholder: '请选择类型',
            inputType: '',
            style: 'width:300px',
            config: {
                label: 'label',
                value: 'id'
            },
            seleteOptions: [
                {
                    id: 1,
                    label: '选项1'
                },
                {
                    id: 2,
                    label: '选项2'
                }
            ]
        }
    ]
};
// const dialogOptions: object = {
//     type: 'form',
//     rulesTrue: true,
//     labelWidth: '',
//     rules: {
//         name: [
//             { required: true, message: 'Please input Activity name', trigger: 'blur' },
//             { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
//         ],
//         region: [
//             {
//                 required: true,
//                 message: 'Please select Activity zone',
//                 trigger: 'change'
//             }
//         ],
//         count: [
//             {
//                 required: true,
//                 message: 'Please select Activity count',
//                 trigger: 'change'
//             }
//         ],
//         date1: [
//             {
//                 type: 'date',
//                 required: true,
//                 message: 'Please pick a date',
//                 trigger: 'change'
//             }
//         ],
//         date2: [
//             {
//                 type: 'date',
//                 required: true,
//                 message: 'Please pick a time',
//                 trigger: 'change'
//             }
//         ],
//         type: [
//             {
//                 type: 'array',
//                 required: true,
//                 message: 'Please select at least one activity type',
//                 trigger: 'change'
//             }
//         ],
//         resource: [
//             {
//                 required: true,
//                 message: 'Please select activity resource',
//                 trigger: 'change'
//             }
//         ],
//         desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }]
//     },
//     formOptions: [
//         {
//             type: 'input',
//             label: '姓名',
//             prop: 'name',
//             placeholder: '请输入姓名',
//             inputType: '',
//             style: ''
//         },
//         {
//             type: 'selete',
//             label: '选择',
//             prop: 'region',
//             placeholder: '请选择',
//             style: '',
//             config: {
//                 label: 'label',
//                 value: 'id'
//             },
//             seleteOptions: [
//                 {
//                     id: 1,
//                     label: '选项1'
//                 },
//                 {
//                     id: 2,
//                     label: '选项2'
//                 }
//             ]
//         },
//         {
//             type: 'date',
//             label: '时间',
//             prop: 'date1',
//             placeholder: '请选择时间',
//             style: 'width:100%',
//             config: {
//                 dateType: 'date',
//                 valueFormat: 'YYYY-MM-DD'
//             }
//         },
//         {
//             type: 'switch',
//             label: '开关',
//             prop: 'delivery'
//         },
//         {
//             type: 'checkbox',
//             label: '多选',
//             prop: 'type',
//             config: {
//                 label: 'label'
//             },
//             checkboxOptions: [
//                 {
//                     id: 1,
//                     label: '选项1'
//                 },
//                 {
//                     id: 2,
//                     label: '选项2'
//                 }
//             ]
//         },
//         {
//             type: 'radio',
//             label: '单选',
//             prop: 'resource',
//             config: {
//                 label: 'name'
//             },
//             radioOptions: [
//                 {
//                     id: 1,
//                     name: '单选1'
//                 },
//                 {
//                     id: 2,
//                     name: '单选2'
//                 }
//             ]
//         },
//         {
//             type: 'input',
//             label: '多文本编辑',
//             prop: 'desc',
//             placeholder: '请输入内容',
//             inputType: 'textarea',
//             style: ''
//         }
//     ]
// };
// const dialogConfig: any = reactive({});
watch(
    () => data.tableData,
    () => {
        loading.value = false;
    }
);
export { data, pagination, columns, loading, fromList, dialogOptions };
